<template>
	<view>
		<swiper :class="[dotStyle ? 'square-dot' : 'round-dot', typeStyle ? 'screen-swiper' : 'card-swiper']" indicator-dots=""
		 :circular="true" :autoplay="true" interval="5000" duration="500" @change="cardSwiper">
			<swiper-item class="card-swiper-item" v-for="(item, index) in datas" :key="index" :class="cardCur == index ? 'cur' : ''">
				<block v-if="typeStyle">
					<image :src="item.url" mode="aspectFill" v-if="item.type == 'image'"></image>
					<video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover" v-if="item.type == 'video'"></video>
				</block>
				<view v-else class="swiper-item">
					<image :src="item.url" mode="aspectFill" v-if="item.type == 'image'"></image>
					<video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover" v-if="item.type == 'video'"></video>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cardCur: 0,
				towerStart: 0,
				direction: ''
			};
		},
		name: 'cu-custom',
		computed: {
			style() {
				var style = '';
				return style;
			}
		},
		props: {
			datas: Array,
			dotStyle: {
				type: [Boolean, String],
				default: false
			},
			typeStyle: {
				type: [Boolean, String],
				default: false
			},
			dots: {
				type: [Boolean, String],
				default: false
			}
		},
		methods: {
			onClick() {
				this.$emit('onclick', true);
			},
			onRight() {
				this.$emit('onright', true);
			},
			cardSwiper(e) {
				this.cardCur = e.detail.current;
				this.$emit('onchange', this.cardCur);
			}
		}
	};
</script>

<style scoped>
	.card-swiper-item{
		width: 630rpx !important;
		left: 60rpx;
		box-sizing: border-box;
		padding: 10rpx 0rpx 10rpx;
		overflow: initial;
	}
</style>
